<template>
    <div class="wrapper1">
        <div class="main">
            <div class="dajishi-div">
                <div class="title1">
                    <span>项目要闻</span>
                </div>
                <div class="dashi-top">
                    <div class="picnews-div">
                        <el-carousel trigger="click" height="400px" indicator="">
                          <el-carousel-item v-for="item in picnews" :key="item.pkid">
                                <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}">                           
                                    <img :src="item.imageurl">
                                    <div class="picnews-title">{{item.nttitle}}</div>
                               </router-link>
                          </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="dongtai-div">
                        <div class="dongtai-title">
                            <img src="../../../static/img/news/trumpet.png" style="display: block;float: left;">
                            <div>新闻</div>
                            <div class="more"><router-link target="_blank" :to="{ path: 'lnews', query: { id: dongtaiId,name:'新闻' }}">查看详情<img src="../../../static/img/news/more.png"></router-link></div>
                        </div>
                        <div class="dongtai-content">
                            <ul>
                                <li v-for="(item, index) in dongtai" class="dongtai" style="right: 0px;" :value ='item.pkid' :key="index">
                                    <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}">
                                        <img src="../../../static/img/news/triangle.png">
                                        <div class='title' :title='item.nttitle' :value ='item.pkid'>{{item.nttitle}}</div>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="dashi-middle">
                    <div class="first typeItem">
                        <div class="typeTitle">政策法规</div>
                        <div class="more"><router-link target="_blank" :to="{ path: 'lnews', query: { id: yantuId,name:'政策法规' }}">【详情】</router-link></div>
                        <div class="type-content">
                             <ul>
                                <li v-for="(item, index) in yantu"  :value ='item.pkid' :key="index">
                                    <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}">
                                        <img src="../../../static/img/news/triangle.png">
                                        <div class='title' :title='item.nttitle' :value ='item.pkid'>{{item.nttitle}}</div>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="second typeItem">
                        <div class=" typeTitle">新区动态</div>
                        <div class="more"><router-link target="_blank" :to="{ path: 'lnews', query: { id: daoluId,name:'新区动态' }}">【详情】</router-link></div>
                        <div class="type-content">
                            <ul>
                                <li v-for="(item, index) in daolu"  :value ='item.pkid' :key="index">
                                    <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}">
                                        <img src="../../../static/img/news/triangle.png">
                                        <div class='title' :title='item.nttitle' :value ='item.pkid'>{{item.nttitle}}</div>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="third typeItem">
                        <div class="typeTitle">申请流程</div>
                        <div class="more"><router-link target="_blank" :to="{ path: 'lnews', query: { id: fangjianId,name:'申请流程',key:'download'}}">【详情】</router-link></div>
                        <div class="type-content">
                            <ul>
                                <li v-for="(item, index) in fangjian"  :value ='item.pkid' :key="index">
                                    <a :href="item.href">
                                        <img src="../../../static/img/news/triangle.png">
                                        <div class='title' :title='item.nttitle' :value ='item.pkid'>{{item.nttitle}}</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="dashi-bottom">
                    <div class="jiedian-div">
                        <div class="jieidan-title">
                            <div class="bg"></div>
                            <span>通知公告</span>
                            <div class="more"><router-link target="_blank" :to="{ path: 'lnews', query: { id: jiedianId,name:'关键节点归纳' }}">查看详情<img src="../../../static/img/news/more.png"></router-link></div>
                        </div>
                        <div class="jiedian-content">
                            <ul>
                                <li v-for="(item, index) in jiedian" class="jiedian" :value ='item.pkid' :key="index">
                                    <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}">
                                        <img src="../../../static/img/news/triangle.png">
                                        <div class='title' :title='item.nttitle' :value ='item.pkid'>{{item.nttitle}}</div>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="jinzhan-div">
                        <div class="jinzhan-title">
                            <div class="bg"></div>
                            <span>文件模版下载</span>
                            <div class="more"><router-link target="_blank" :to="{ path: 'lnews', query: { id: jinzhanId,name:'文件模版下载',key:'download'}}">查看详情<img src="../../../static/img/news/more.png"></router-link></div>
                        </div>
                        <div class="jinzhan-content">
                            <ul>
                                <li v-for="(item, index) in jinzhan" class="jinzhan" :value ='item.pkid' :key="index">
                                    <a :href = item.href>
                                        <img src="../../../static/img/news/triangle.png">
                                        <div class='title' :title='item.nttitle' :value ='item.pkid'>{{item.nttitle}}</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="middlebanner"><span>“创新、协调、绿色、开发、共享” 发展理念</span><img src="../../../static/img/news/middlebanner.png"></div>
            </div>
            <div class="zhengce-div">
                 <div class="title1">
                    <span>工作掠影</span>
                </div>
                <div class="zhengces">
                    <el-carousel trigger="click" height="400px" indicator="">     
                        <el-carousel-item v-for="item in zhengce" :key="item.pkid"> 
                            <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}">                     
                                <img :src="item.imageurl">
                            </router-link>                         
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {copyright,SGSConfig,Sites} from './../tool/Global/app-config.js';
    import {queryNewsClass,queryNewsDetail} from './../tool/Global/app-mgr.js'
    export default {
         data: function(){
            return {
                copyright: copyright,
                picnewsId:YanAnAPP.newsConfig.picnews,//项目要闻
                dongtaiId:YanAnAPP.newsConfig.dongtai,//新闻
                yantuId:YanAnAPP.newsConfig.yantu,//政策法规
                fangjianId:YanAnAPP.newsConfig.fangjian,//申请流程
                daoluId:YanAnAPP.newsConfig.daolu,//新区动态
                jiedianId:YanAnAPP.newsConfig.jiedian,//通知公告
                jinzhanId:YanAnAPP.newsConfig.jinzhan,//文件模版下载
                zhengceId: YanAnAPP.newsConfig.zhengce,//工作掠影
                picnews:null,//项目要闻
                dongtai:null,//新闻
                yantu:null,//政策法规
                fangjian:null,//申请流程
                daolu:null,//新区动态
                jiedian:null,//通知公告
                jinzhan:null,//文件模版下载
                zhengce: null,//工作掠影

            }
        },
        mounted() {
            this.$emit("itemChange","dynamic");
            this.initPicnews();
            this.initDongtai();
            this.initYantu();
            this.initFangjian();
            this.initDaolu();
            this.initJiedian();
            this.initJinzhan();
            this.initZhengce();

        },
        methods:{
            initPicnews(){
                let getArchiveUrl = SGSConfig.getArchive;
                queryNewsClass(YanAnAPP.newsConfig.picnews,{pagesize:3,pageindex:1}).then((result)=>{
                    this.picnews  = result.data.resultInfo.data.items;
                    for (var i = 0; i < this.picnews.length; i++) {
                        this.picnews[i].imageurl=this.picnews[i].imageurl;
                    }
                })
            },
            initDongtai(){
                queryNewsClass(YanAnAPP.newsConfig.dongtai,{pagesize:8,pageindex:1}).then((result)=>{
                    this.dongtai  = result.data.resultInfo.data.items;
                })
            },
            initYantu(){
                queryNewsClass(YanAnAPP.newsConfig.yantu,{pagesize:5,pageindex:1}).then((result)=>{
                    this.yantu  = result.data.resultInfo.data.items;
                })
            },
            initFangjian(){
                queryNewsClass(YanAnAPP.newsConfig.fangjian,{pagesize:5,pageindex:1}).then((result)=>{
                    this.fangjian  = result.data.resultInfo.data.items;
                    this.fangjian.forEach(function(item){
                        var content = item.ntcontent;
                        var strat = content.indexOf('href')+6;
                        var end = content.indexOf('target')-2;
                        var href = content.substring(strat,end);
                        item.href = href;
                    });
                })
            },
            initDaolu(){
                queryNewsClass(YanAnAPP.newsConfig.daolu,{pagesize:5,pageindex:1}).then((result)=>{
                    this.daolu  = result.data.resultInfo.data.items;
                })
            },
            initJiedian(){
                queryNewsClass(YanAnAPP.newsConfig.jiedian,{pagesize:3,pageindex:1}).then((result)=>{
                    this.jiedian  = result.data.resultInfo.data.items;
                })
            },
            initJinzhan(){
                queryNewsClass(YanAnAPP.newsConfig.jinzhan,{pagesize:3,pageindex:1}).then((result)=>{
                    this.jinzhan  = result.data.resultInfo.data.items;
                    this.jinzhan.forEach(function(item){
                        var content = item.ntcontent;
                        var strat = content.indexOf('href')+6;
                        var end = content.indexOf('target')-2;
                        var href = content.substring(strat,end);
                        item.href = href;
                    });
                })
            },
            initZhengce(){
                queryNewsClass(YanAnAPP.newsConfig.zhengce,{pagesize:3,pageindex:1}).then((result)=>{
                    this.zhengce  = result.data.resultInfo.data.items;
                })
            },

        }
    }
</script>
<style scoped>
    .wrapper1{
        min-height: calc(100% - 170px);
        min-height: -moz-calc(100% - 170px);
        min-height: -webkit-calc(100% - 170px);
    }
    .main{
        width: 1280px;
        margin: 0 auto;
    }
    a {
        color: black;
    }
    .title1{
        background: url("../../../static/img/news/titlebg1.png");
        width: 1280px;
        height: 41px;
        margin:15px auto;
    }
    .title1 span{
        position: relative;
        color: #fff;
        padding: 10px 60px;
        top: 10px;
        font-size: 19px;
        text-align: center;
        width: 100px;
    }
    .title1 .more{
        float: right;
        color: #000;
        padding: 12px 20px;
        font-size: 15px;
        cursor: pointer;
    }
    .title1 .more img{
        margin: 0 5px;
        height: 12px;
    }
    .picnews-div{
        display: inline-block;
    }
    .el-carousel{
        width: 840px;
        height: 400px;
    }
    .zhengces .el-carousel{
        width: 1280px;
        height: 400px;
    }
    .zhengces .el-carousel img{
        width: 1280px;
        height: 400px;
    }
    .el-carousel__indicators{
        left: 83%;
    }
    .el-carousel img{
         width: 840px;
        height: 400px;
    }
    .el-carousel .picnews-title{
        position: relative;
        bottom: 45px;
        background: black;
        opacity: 0.7;
        color: white;
        height: 60px;
        padding: 10px 25px;
    }
    .dongtai-div{
        float: right;
        width: 380px;
        margin-left: 45px;
    }
    .dongtai-title div{
        display: inline-block;
        font-size: 19px;
        height: 30px;
        line-height: 31px;
        margin-left: 10px;
    }
    .dongtai-title div.more{
        float: right;
        font-size: 15px;
        cursor: pointer;
    }
    .dongtai-title div.more img{
        margin-left: 5px;
        font-size: 16px;
        height: 11px;
    }
    .dongtai-content{
        padding:23px 0 0 0;
    }
    .dongtai-content li{
        list-style: none;
        height: 43px;
    }
    .dongtai-content .title{
        padding-left: 5px;
        display: inline-block;
        width: 330px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
    }
    .typeItem{
        width: 400px;
        height: 240px;
        border: 1px #cac5c5 solid;
        float:left;
        padding-top: 15px;
        margin-top: 20px;
    }
    .first{
        margin-right: 16px;

    }
    .second{
        margin-right: 16px;
        margin-left: 16px;

    }
    .third{
        margin-left: 16px;
    }
    .typeTitle{
        position: relative;
        bottom: 25px;
        left: 20px;
        height: 40px;
        font-size: 18px;
        color: white;
        display: inline-block;
        width: 158px;
        text-align: center;
        line-height: 40px;

    }
    .first .typeTitle{
        background: url("../../../static/img/news/titlebg2.png") no-repeat;
    }
    .second .typeTitle{
        background: url("../../../static/img/news/titlebg3.png") no-repeat;
    }
    .third .typeTitle{
        background: url("../../../static/img/news/titlebg4.png") no-repeat;
    }
    .typeItem .more{
        float: right;

        font-size: 14px;
        cursor: pointer;
        padding-right: 10px;
        position: relative;
        top: -5px;
    }
    .typeItem .more a{
        color: red;
    }
    .jiedian-div,.jinzhan-div{
        float: left;
        margin-top: 50px;
    }
    .jiedian-div{
        width: 870px;
    }
    .jinzhan-div
    {
        width: 380px;

    }
    .jieidan-title{
        width: 830px;
    }
    .jinzhan-title{
        width: 395px;
    }
    .jieidan-title div.bg,.jinzhan-title div.bg{
        background: #008cde;
        width: 10px;
        height: 25px;
        display: inline-block;

    }
    .jieidan-title span, .jinzhan-title span{
        position: relative;
        top: -5px;
        left: 10px;
    }
    .jieidan-title .more, .jinzhan-title .more{
        float: right;
        font-size: 14px;

        cursor: pointer;
    }
    .dongtai-title div.more a, .jieidan-title .more a, .jinzhan-title .more a{
        color: gray;
    }
    .jieidan-title .more img, .jinzhan-title .more img{
        margin-left: 5px;
        height: 10px;
    }
    .jiedian-content,.jinzhan-content{
        border: 1px #cac5c5 solid;
        height: 100px;
        margin-top: 15px;
        margin-bottom: 30px;
        padding: 20px 0;
    }
     .jiedian-content{
        width: 838px;

     }
     .jinzhan-content{
         width: 402px;
         margin-left: 1px;

     }
     .type-content li,.jiedian-content li,.jinzhan-content li{
        list-style: none;
        height: 40px;
        padding-left: 20px;
    }
    .type-content .title,.jinzhan-content .title{
        padding-left: 5px;
        display: inline-block;
        width: 330px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
    }
    .jiedian-content .title{
        padding-left: 5px;
        display: inline-block;
        width: 770px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
    }






    .middlebanner span{
        position: relative;
        float: left;
        color: white;
        top: 106px;
        left: 90px;
        font-size: 30px;
    }
    .zhengce{
        width: 386px;
        list-style: none;
        margin: 0 20px 20px 20px;
        position: relative;
        display: inline-block;
    }
    .zhengce-title{
        font-size: 19px;
        font-weight: bold;
        overflow:hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
        line-height: 45px;
    }
    .zhengce-content{
        height: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        line-height: 25px;
    }
    .liucheng img{
        margin: 15px 0 50px 0;
    }
    .footer{
        bottom:0px;
        background-color: #0888de;
        text-align: center;
        font-size: 18px;
        color: white;
        line-height: 50px;
    }
</style>


